iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 20
1
Mobile Development

iOS APP 使用Swift打造一個外送平台APP (以foodpanda、Uber Eats為例) 系列 第 21

[Day 20] Swift Google Map 地圖 GMSMapView 實作運用 標記 定位 大頭針

  • 分享至 

  • xImage
  •  

簡要

現在Google Map應該是很多人都會使用
不管是APP或是Web都很好用
查詢地點規劃路線
公車資訊 要搭幾號車
其實上面都有呈現
還有路段的壅塞程度
更棒得是電腦與手機的紀錄可以同步
已紀錄的地點 在手機內也可看到
這點應該是現在Apple Map比較不足的地方
前幾年還聽說Apple Map開放網頁版
結果現在去搜尋Apple Map什麼都找不到
SEO直接顯示Apple總公司Google Map位置
格外諷刺 所以今天就來介紹Google Map SDK

https://ithelp.ithome.com.tw/upload/images/20191005/20112271rO6xDkzZPs.png

金鑰申請

Google Map SDK是需要金鑰
且要使用Cocoapod 安裝
Map API部分並不是免費的 請注意
超過一定流量是要收費得

//https://console.developers.google.com/apis/dashboard?project=maptest-1570257246222&folder=&organizationId=

接下來請到以下連結
Google API

Step 1 - 點擊開始使用

https://ithelp.ithome.com.tw/upload/images/20191005/20112271AovEWI4XHw.png

Step 2 - 點選想使用的功能

https://ithelp.ithome.com.tw/upload/images/20191005/20112271HzZ5CPkabM.png

Step 3 - 新增專案

https://ithelp.ithome.com.tw/upload/images/20191005/20112271YiOIpVJx4q.png

接下來一直按下一步

Step 4 - 取得金鑰

https://ithelp.ithome.com.tw/upload/images/20191005/20112271gVJ68pX5si.png

金鑰很重要請妥善保管

環境安裝

如果你沒有裝cocoapad的話
開啟mac 裡面的 終端機
cd 到你得iOS 專案資料夾
然後下指令

pod init

接下來就會在資料夾內部
長出Profile 文件
打開 並且新增 Google MapSDK

pod 'GoogleMaps'
pod 'GooglePlaces'  

儲存文件 回到剛剛的 終端機
開始安裝

pod install

https://ithelp.ithome.com.tw/upload/images/20191005/20112271L6rJH1Fakt.png

大致上就可以了
接下來打開你新長出來的.xcworkspace檔案

https://ithelp.ithome.com.tw/upload/images/20191005/20112271a2cmsKaJM6.png

ppDelegate 部分添加剛剛申請的金鑰
利用GMSServices.provideAPIKey 添加進去
之後所有class都可以使用Google Map SDK

import UIKit
import GoogleMaps
@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {
    let apiKey = "A12IzaSyCYxLMPG2xasv9c2Dfx1Lay1aR9n35eo"
    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        // Override point for customization after application launch.
        GMSServices.provideAPIKey(apiKey)
        return true
    }
}

Google Map的地圖新增
跟一般的差不多物件名稱是GMSMapView

let mapView = GMSMapView()
mapView.frame = CGRect.init(x: 0, y: 0, width: self.view.frame.width, height: self.view.frame.height)
self.view.addSubview(mapView)

GMSCameraPosition.camera 可設定自己的位置

  • withLatitude 經度
  • longitude 緯度
  • zoom 地圖大小 數值越小東西越小

比如設置為 1

let camera = GMSCameraPosition.camera(withLatitude: 25.034012, longitude: 121.564461, zoom: 1.0)
mapView.camera = camera

https://ithelp.ithome.com.tw/upload/images/20191005/20112271x1P2MDXmbH.png

地圖就會拉得非常遠
所以如果要進一點建議設置15
我們這邊用台北101為定位

https://ithelp.ithome.com.tw/upload/images/20191004/20112271iEsPf2o6ot.png

let camera = GMSCameraPosition.camera(withLatitude: 25.034012, longitude: 121.564461, zoom: 15.0)
mapView.camera = camera

https://ithelp.ithome.com.tw/upload/images/20191005/20112271zhNdlFbqWD.png

接下來只剩下標記
大頭針而已
這邊是使用GMSMarker來實作
也是可以設置主標題title以及副標題snippet

let marker = GMSMarker()
marker.position = CLLocationCoordinate2DMake(25.034012, 121.563461)
marker.map = mapView
marker.title = "標題1"
marker.snippet = "副標題1"

let marker2 = GMSMarker()
marker2.position = CLLocationCoordinate2DMake(25.034012, 121.566461)
marker2.map = mapView
marker2.title = "標題2"
marker2.snippet = "副標題2"

https://ithelp.ithome.com.tw/upload/images/20191005/20112271o4ixLMwRU6.png

完成


上一篇
[Day 19] Swift MKMapView 原生地圖介紹範例 標記 自身座標 移動到座標 大頭針
下一篇
[Day 21] Swift 餐廳詳細餐單資訊實作 (三) - Google Map 地圖 GMSMapView 新增
系列文
iOS APP 使用Swift打造一個外送平台APP (以foodpanda、Uber Eats為例) 31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言